<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}">

</head>
<body >
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
        <span th:if="${user eq null}">您还没有登录<br></span>
        <span>没有收货地址的提示</span>
    </div>
    <table class="table" id="goodslist">
        <tr>
            <td>商品名称</td>
            <td colspan="3" th:text="${goodsVo.goodsName}"></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="3"><img th:src="@{${goodsVo.goodsImg}}" width="200" height="200"></td>
        </tr>
        <tr>
            <td>秒杀开始时间</td>
            <!--格式化-->
            <td th:text="${#dates.format(goodsVo.startDate,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td id="seckillTip">
                <input type="hidden" id="remainSeconds" th:value="${remainSeconds}"/>
                <span th:if="${seckillStatus eq 0}">秒杀倒计时：<span id="countDown" th:text="${remainSeconds}"></span>秒</span>
                <span th:if="${seckillStatus eq 1}">秒杀进行中</span>
                <span th:if="${seckillStatus eq 2}">秒杀已结束</span>
            </td>
            <td>
                <form action="/seckill/do_seckill" method="post" id="seckillForm">
                    <button id="buyButtion" type="submit" class="btn btn-primary btn-block">
                        立即秒杀
                    </button>
                    <input type="hidden" name="goodsId" th:value="${goodsVo.id}">
                </form>
            </td>
        </tr>
        <tr>
            <td>商品原价</td>
            <td colspan="3" th:text="${goodsVo.goodsPrice}"></td>
        </tr>
        <tr>
            <td>秒杀价</td>
            <td colspan="3" th:text="${goodsVo.seckillPrice}"></td>
        </tr>
        <tr>
            <td>库存数量</td>
            <td colspan="3" th:text="${goodsVo.stockCount}"></td>
        </tr>
    </table>
</div>
<!--jquery-->
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
<script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<script type="text/javascript">

    $(function () {
        countDown();
    })
    function countDown() {
        var timeout;
        var remainSeconds=$("#remainSeconds").val();
        if (remainSeconds>0){/*秒杀没有开始*/
            //一秒钟执行一次
            timeout=setTimeout(function () {
                $("#buyButtion").attr("disabled",true);
                $("#remainSeconds").val(remainSeconds-1);
                $("#countDown").text(remainSeconds-1);
                countDown();
            },1000);
        }else if (remainSeconds==0){/*秒杀进行中*/
            $("#buyButtion").attr("disabled",false);
            if (timeout){
                //清除
                clearTimeout(timeout);
            }
            $("#seckillTip").html("秒杀进行中");
        } else {//结束
            $("#buyButtion").attr("disabled",true);
            $("#seckillTip").html("秒杀已结束");
        }

    }
</script>
</body>
</html>